<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>

<!DOCTYPE html>
<html>
<head>
	<title>阿玛尼护肤造型</title>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<meta name="format-detection" content="telephone=no">
	<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0,user-scalable=no">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
	<link rel="stylesheet" type="text/css" media="screen" href="${ROOT_PATH }content/scripts/bootstrap/css/bootstrap.min.css">
	<link rel="stylesheet" type="text/css" media="screen" href="${ROOT_PATH }content/css/storefront.css">
	<style type="text/css">
		.carousel-inner>.item>img{
			height:150px;
		}
	</style>
	<script src="${ROOT_PATH }content/scripts/jquery-1.10.1.min.js"></script>
	<script src="${ROOT_PATH }content/scripts/juery.hammer.js"></script>
	<script src="${ROOT_PATH }content/scripts/bootstrap/js/bootstrap.min.js"></script>
	
</head>
<body>
	<section>
		<div id="myCarousel" class="carousel slide">
			<ol class="carousel-indicators">
				<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
				<li data-target="#myCarousel" data-slide-to="1"></li>
				<li data-target="#myCarousel" data-slide-to="2"></li>
			</ol>
			<!-- Carousel items -->
			<div class="carousel-inner">
				<div class="active item">
					<img data-href="http://mp.weixin.qq.com/s?__biz=MjM5NjY2MTkzMg==&mid=214617457&idx=1&sn=1a6d89de4ca240deb66392d534d87c3f#rd"
						src="http://7xkadu.com2.z0.glb.qiniucdn.com/20150921-01.jpg" >
				</div>
				<div class="item">
					<img data-href="http://mp.weixin.qq.com/s?__biz=MjM5NjY2MTkzMg==&mid=213980528&idx=1&sn=532497c3a6ec671f9edde5a8046f8dcb#rd"
						src="http://7xkadu.com2.z0.glb.qiniucdn.com/ME6A8191-3-01.jpg" >
				</div>
				<div class="item">
					<img data-href="http://mp.weixin.qq.com/s?__biz=MjM5NjY2MTkzMg==&mid=214184076&idx=1&sn=f6b5cbe5fcfd6b644596ea0700977194#rd"
						src="http://7xkadu.com2.z0.glb.qiniucdn.com/ME6A8191-3-02.jpg" >
				</div>
			</div>
		</div>
		<!-- 
		<div>
			<ul class="tabs" id="rootTab">
			  <li <c:if test="${type=='mf' }">class="active"</c:if>>
			  	<a href="#cosmetology">
			  		<img class="sel" src="${ROOT_PATH }content/images/p1_mf_sel.png">
			  		<img class="noSel" src="${ROOT_PATH }content/images/p1_mf_n.png">
			  	</a> 
			  	<img class="under" src="${ROOT_PATH }content/images/p1_sel.png">
			  </li>
			  <li <c:if test="${type=='mr' }">class="active"</c:if>>
			  	<a href="#salon">
			  		<img class="sel" src="${ROOT_PATH }content/images/p1_mr_sel.png">
			  		<img class="noSel" src="${ROOT_PATH }content/images/p1_mr_n.png">
			  	</a>
			  	<img class="under" src="${ROOT_PATH }content/images/p1_sel.png">
			  </li>
			</ul>
		</div>
		 -->
		<div class="tab-content">
			<div id="cosmetology" class="tab-pane <c:if test="${type=='mf' }">active</c:if>">
				<div id="works">
					
				</div>
			</div>
			<div id="salon" class="tab-pane <c:if test="${type=='mr' }">active</c:if>">
				<div>
					<ul class="tabs" id="leafTab">
					  <li class="active">
					  	<a href="#qbxm">
					  		<span class="sel font-y">全部项目</span>
					  		<span class="noSel">全部项目</span>
					  	</a> 
					  	<img class="under" src="${ROOT_PATH }content/images/p1_sel_small.png">
					  </li>
					  <li>
					  	<a href="#tc">
					  		<span class="sel font-y">套餐</span>
					  		<span class="noSel">套餐</span>
					  	</a>
					  	<img class="under" src="${ROOT_PATH }content/images/p1_sel_small.png">
					  </li>
					  <li>
					  	<a href="#mb">
					  		<span class="sel font-y">面部</span>
					  		<span class="noSel">面部</span>
					  	</a>
					  	<img class="under" src="${ROOT_PATH }content/images/p1_sel_small.png">
					  </li>
					  <li>
					  	<a href="#st">
					  		<span class="sel font-y">身体</span>
					  		<span class="noSel">身体</span>
					  	</a>
					  	<img class="under" src="${ROOT_PATH }content/images/p1_sel_small.png">
					  </li>
					</ul>
				</div>
				<div class="tab-content">
					<div id="qbxm" class="tab-pane active">
						<div id="projects_qbxm"></div>
					</div>
					<div id="tc" class="tab-pane">
						<div id="projects_tc"></div>
					</div>
					<div id="mb" class="tab-pane">
						<div id="projects_mb"></div>
					</div>
					<div id="st" class="tab-pane">
						<div id="projects_st"></div>
					</div>
				</div>
				
			</div>
		</div>
	</section>
	<script type="text/javascript">
		var page = 0;
		var page2 = 0;
		var isloading = false;
		var xcoordinate = 0;
		var ycoordinate = 0;
		var showPosition= function showPosition(position) {
	        xcoordinate=position.coords.longitude;
	        ycoordinate=position.coords.latitude;
	    };
		$(function(){
			navigator.geolocation.getCurrentPosition(showPosition);
			showActviceUnder();
			//轮播图
			$('.carousel').carousel();
			$('.carousel').hammer().on('swipeleft', function(){
				  $(this).carousel('next');
				 });
			$('.carousel').hammer().on('swiperight', function(){
			  $(this).carousel('prev');
			 });
			$(".carousel-inner .item img").click(function(){
				to = $(this).attr("data-href");
				location.href= to;
			})
			$('.tabs a').click(function (e) {
				  e.preventDefault();
				  $(this).tab('show');
				  showActviceUnder();
				})
			getWorks();
			getProjects("qbxm");
			getProjects("tc");
			getProjects("mb");
			getProjects("st");
			bottomRefresh();
		});
		function bottomRefresh(){
			var gDiv = $("#content");
            $(window).scroll(function(){
				var scrollTop = $(this).scrollTop();
				var scrollHeight = $(document).height();
				var windowHeight = $(this).height();
				if(scrollTop + windowHeight == scrollHeight){
					//滚动触发ajax 加载页面内容 
					getWorks();
				}
            });
        }
		function showActviceUnder(){
			$(".under").hide();
			$(".tabs .active .under").hide().show();
		}
		function getWorks(){
			if(!isloading){
				isloading = true;
				$.post("${ROOT_PATH }Storefront/works",
						{page:page,
					 		xcoordinate:xcoordinate,
					 		ycoordinate:ycoordinate,
						},
						function(data){
							//alert(data.length);
							var content = "";
							for(i=0;i<data.length;i++){
								var works = data[i];
								content += "<div class=\"work\">"
									+ "<div class=\"work-head\">"
									+ "<div class=\"work-head-img\">"
									+ "<img src=\""+works.headImgUrl.value+"\" class=\"img-circle\" width=\"32px\">"
									+ "</div>"
									+ "<div class=\"work-head-font-l\">"+works.name.value+"</div>"
									+ "<div class=\"work-head-font-r\">"+works.position.value+"</div>"
									+ "</div>"
									+ "<div class=\"work-body\">"
									+ "<img class=\"workshow\" src=\""+works.imgUrl.value+"\" onclick=\"toWork("+works.id+")\">"
									+ "</div>"
									+ "<div class=\"work-foot\">"
									+ "<div class=\"price font-y\">￥"+works.price+"</div>"
									+ "<div class=\"number\">"+works.number+"人做过</div>"
									+ "<div class=\"praise\"><img class=\"zan\" src=\"${ROOT_PATH }content/images/p1_zan.png\">&nbsp;"+works.praise+"</div>"
									+ "</div>"
									+ "</div>";
							}
							$("#works").append(content);
							isloading = false;
							page++;
							console.log(page);
						},"json");
			}
		}
		function getProjects(type){
			var val = "all";
			if(type=="mb"){
				val = "1";
			}else if(type=="st"){
				val = "2";
			}else if(type=="tc"){
				val = "3";
			}else if(type=="qbxm"){
				val = "all";
			}
			$.post("${ROOT_PATH }Storefront/projects?type="+val,
					{page:page},
					function(data){
						var content = "";
						for(i=0;i<data.length;i++){
							var project = data[i];
							console.log(project.imgUrl.value);
							content += "<div class=\"project\"> " 
								+"<img src=\""+project.imgUrl.value+"\" onclick=\"toProject("+project.type+","+project.id+")\">"
								+"<div class=\"words\"> "
								+"<span class=\"name font-y\">"+project.name.value+"</span> "
								+"<span class=\"time\">约"+project.time.value+"分钟</span> "
								+"<span class=\"effect\">"+project.effect.value+"</span> "
								+"<div class=\"price\"> "
								+"<span class=\"discount font-y\">￥"+project.discount.value+"</span> "
								+"<span class=\"original\">￥"+project.original.value+"</span> "
								+"</div> "
								+"</div> "
								+"</div> ";
						}
						$("#projects_"+type).append(content);
						isloading = false;
						page2++;
						},"json");
		}
		function toWork(id){
			location.href="${ROOT_PATH }Storefront/workshow?id="+id;
		}
		function toProject(type,id){
			location.href="${ROOT_PATH }Storefront/detail/"+type+"/"+id;
		}
	</script>
</body>
</html>